<template>
    <div class="posts">
        <ul>
            <li v-for="(item, index2) in arr" :key="index2">
                <div class="post-top">
                    <div>
                        <span>{{item.name}}</span>
                        <p>关注{{item.follow}}人</p>
                    </div>
                    <img :src="item.src">
                </div>
                <div class="post-main">
                    <ol>
                        <li v-for="(item2, index2) in arr[index2].content" :key="index2">
                            <div class="post-head">
                                <img :src="item2.avatar">
                            </div>
                            <div class="post-content">
                                <p>
                                    <span>{{item2.user}}：</span>
                                    {{item2.posts}}
                                </p>
                            </div>
                        </li>
                    </ol>
                </div>
            </li>
        </ul>
    </div>
</template>

<script>
import {trendArray} from '@/assets/data/home-trend.js'
export default ({
    name: 'HomeTrend',
    data() {
        return {
            arr: trendArray
        }
    }
})
</script>

<style lang="scss" scoped>
.posts {
    width: 100%;
    >ul {
        >li {
            border-radius: 5px;
            margin-bottom: 25px;
            overflow: hidden;
            cursor: pointer;
            .post-top {
                height: 95px;
                display: flex;
                justify-content: space-between;
                background-color: #111;
                div{
                    padding-top: 20px;
                    padding-left: 10px;
                    box-sizing: border-box;
                    span {
                        color: white;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                    p {
                        margin-top: 10px;
                        font-size: 14px;
                        color: #999;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        overflow: hidden;
                    }
                }
                img {
                    width: 50px;
                    height: 75px;
                    margin: 10px;
                    border-radius: 5px;
                }
            }
            .post-main {
                width: 100%;
                background-color: white;
                ol {
                    li {
                        padding: 15px 10px;
                        box-sizing: border-box;
                        display: flex;
                        position: relative;
                        .post-head {
                            margin-top: 5px;
                            margin-right: 10px;
                            img {
                                width: 25px;
                                height: 25px;
                                border-radius: 50%;
                            }
                        }
                        .post-content {
                            width: 100%;
                            span {
                                color: #999;
                            }
                        }
                        &::after {
                            width: 290px;
                            content: "";
                            display: block;
                            border-bottom: 1px solid #ccc;
                            position: absolute;
                            bottom: 0;
                            left: 45px;
                        }
                        &:last-child::after {
                            border-bottom: 0;
                        }
                    }
                }
            }
        }
    }
}
</style>
